<template>
	<view class="QS-DynamicForm" ref="QS-DynamicForm">
		<QS-Form ref="QSForm" :rules="rules">
			<QS-Form-Item v-for="(item, index) in nFormItems" :key="index" :label="item.label">
				<block v-if="item.formType == 'switch'">
					<QS-Switch dynamicForm :ref="`QSFormItemEl_${index}`" :prop="item.prop"></QS-Switch>
				</block>
				<block v-else-if="item.formType == 'checkbox'">
					<QS-Checkbox dynamicForm :ref="`QSFormItemEl_${index}`" :itemArray="item.itemArray" :prop="item.prop"></QS-Checkbox>
				</block>
				<block v-else-if="item.formType == 'radio'">
					<QS-Radio dynamicForm :ref="`QSFormItemEl_${index}`" :itemArray="item.itemArray" :prop="item.prop"></QS-Radio>
				</block>
				<block v-else-if="item.formType == 'input' || !item.formType">
					<QS-Input dynamicForm :ref="`QSFormItemEl_${index}`" :prop="item.prop" :type="item.type"></QS-Input>
				</block>
				<block v-else-if="item.formType == 'slot'">
					<slot v-if="item.name == 'slot-1'" name="slot-1"></slot>
					<slot v-else-if="item.name == 'slot-2'" name="slot-2"></slot>
				</block>
			</QS-Form-Item>
		</QS-Form>
	</view>
</template>

<script>
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	// import QSForm from '../QS-Form/QS-Form.vue';
	// import QSFormItem from '../QS-Form-Item/QS-Form-Item.vue';
	// import QSInput from '../QS-Input/QS-Input.vue';
	import convertToPinyin from '../../js/functions/convertToPinyin.js';
	import { isArray } from '../../js/baseUtil.js';
	const componentType = 'QS-DynamicForm';
	const QSComponentMixinRes = QSComponentMixin({
		componentType,
		nodeName: '.QS-DynamicForm'
	});
	export default {
		// components: {
		// 	QSForm,
		// 	QSFormItem,
		// 	QSInput
		// },
		mixins: [
			QSComponentMixinRes.mixin,
		],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			formItems: {
				type: Array,
				default: () => []
			},
			rules: {
				type: Object,
				default: () => null
			},
			labelWidth: {
				type: String,
				default: ''
			},
			labelPosition: {
				type: String,
				default: ''
			},
			theme: {
				type: String,
				default: ''
			},
			validateStateFixed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				nFormItems: []
			}
		},
		watch: {
			formItems: {
				handler(n) {
					console.log('formItems改变', n);
					for (let i = 0; i < n.length; i++) {
						const item = n[i];
						if (!item.prop) {
							item.prop = convertToPinyin(item.label);
						}
					}
					this.nFormItems = [];
					this.$nextTick(() => {
						// this.setTimeoutFn(n.length, ()=>{
						this.setFormItems(n);
						// })
					})
				},
				immediate: true
			},
		},
		methods: {
			setTimeoutFn(length, fn) {
				setTimeout(fn, length * 10);
			},
			setFormItems(n) {
				this.nFormItems = Object.freeze(n);
				// #ifdef MP-ALIPAY
				this.$nextTick(() => {
					this.setTimeoutFn(n.length, this.MPALIUPDATE)
				})
				// #endif
			},
			submit() {
				// this.MPALIUPDATE(); return;
				return this.$refs.QSForm.submit();
			},
			// 支付宝小程序 曲线救国，因将form组件封装在一个自定义组件中时，在子组件内部不能获取到父组件, 页面上使用form 无问题
			// #ifdef MP-ALIPAY
			MPALIUPDATE() {
				if (!this.formItems.length) return;
				this.$nextTick(() => {
					const refs = this.$refs;
					const QSForm = refs.QSForm;
					const els = [];
					const formItems = [];
					for (let i in refs) {
						if ((new RegExp("QSFormItemEl_")).test(i)) {
							const ind = Number(i.replace('QSFormItemEl_', ''));
							const elRefs = refs[i]
							const el = elRefs[elRefs.length - 1];
							els.push(el);
							const formItemRefs = QSForm.$refs[`QSFormItem_${ind}`];
							const formItem = formItemRefs[formItemRefs.length - 1];
							el.setFormItem(formItem);
							formItem.setElObj([el]);
							this.initFormItem(formItem, el);
							formItems.push(formItem);
						}
					}
					QSForm.setElObjs(els);
					QSForm.setItemsObj(formItems);
				})
			},
			initFormItem(formItem, el) {
				if(this.labelWidth && !formItem.labelWidth) formItem.setLabelWidth(this.labelWidth);
				if(this.labelPosition) formItem.setLabelPosition(this.labelPosition);
				if(this.theme) formItem.setTheme(this.theme);
				if(this.validateStateFixed) formItem.setValidateStateFixed(this.validateStateFixed);
				if(this.rules) {
					let item = Object.keys(this.rules).find(i=>i == el.prop);
					if(!item) return;
					item = this.rules[item];
					if(isArray(item)) {
						if(-1 != item.findIndex(it=>it.required)) {
							formItem.setRequired(true);
						}
					}else{
						if(item.required) {
							formItem.setRequired(true);
						}
					}
				}
			}
			// #endif
		}
	}
</script>

<style scoped>
	.QS-DynamicForm {}
</style>
